<script lang='ts' setup>

import { message, SelectProps } from "ant-design-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const open2 = ref<boolean>(false);
const handleOk2 = () => {
    open2.value = false;
};

const options = ref<SelectProps['options']>([
    { value: 'a', label: '个人版', disabled: true },
    { value: 'b', label: '商业版' },
    { value: 'c', label: '旗舰版' },
    { value: 'd', label: '定制版' },
]);

const router = useRouter()


const handleChange = (value: string) => {
    if (value == 'a') {
        message.info("您当前版本")
    }
    else if (value == 'd') {
        open2.value = true
    } else {
        router.push({
            path: '/cart/confirmOrder',
        })
    }
};

const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const value = ref<string | undefined>(undefined);


</script>
<template>

    <h3 class="mt-3 font-bold">
        当前版本
    </h3>

    <div class="flex items-center ml-5">
        <p class="mb-0 mr-5">
            <span>个人版</span>
        </p>
        <a-select v-model:value="value" show-search placeholder="选择版本升级" style="width: 200px" :options="options"
            :filter-option="filterOption" @change="handleChange"></a-select>
    </div>
    <a-modal v-model:open="open2" @ok="handleOk2">
        <div class="pt-8">
            高级定制版需联系我司客服进行定制 联系方式：123456789
        </div>
    </a-modal>



</template>
<style lang='scss' scoped></style>